<template>
	<view class="home">
		<image :src="imaurl+'b1.png'" style="width: 100%;height: 524rpx;" mode=""></image>
		<view class="contentBox">
			<!-- 信息录入 -->
			<view class="enterMessage">
				<view class="title">
					<view class="shu"></view>
					<view class="">
						交鸽信息录入
					</view>
				</view>

				<view class="itemBox">
					<view class="message" style=" ">
						<view class="lable">
							年份
						</view>
						<view class="inputitem" style="padding-top: 20rpx;">
							{{year}}<!-- -{{province}}<text v-if="number!=''">-{{number}}</text> -->
						</view>
					</view>

					<view class="message" style=" ">
						<view class="lable">
							区号
						</view>
						<view class="inputitem" :class="province=='' ? 'colors' : ''" @click="provinceshow = true"
							style="padding-top: 20rpx;width: 200rpx;">
							{{province=="" ? '请选择区号' :province}}
						</view>
					</view>

				</view>
				<view class="itemBox">
					<view class="message" style="">
						<view class="lable">
							环号
						</view>
						<input class="inputitem" v-model="number" type="number" placeholder="请输入" />
					</view>
					<view class="message" style=" ">
						<view class="lable">
							羽色
						</view>
						<view class="inputitem" :class="color=='' ? 'colors' : ''" @click="yuseshow = true"
							style="padding-top: 20rpx;width: 200rpx;">
							{{color=="" ? '请选择羽色' :color}}
						</view>
					</view>
				</view>
				<view class="itemBox">
					<view class="message">
						<view class="lable">
							其他
						</view>
						<textarea class="textareaitem" v-model="other" name="" id="" cols="30" rows="10"
							placeholder="请输入"></textarea>
					</view>
				</view>

				<view class="btns" @click="handleSubmit">
					确认提交
				</view>

			</view>




			<!-- 服务 -->

			<view class="serveList">
				<view class="title" style="padding: 0;">
					<view class="shu"></view>
					<view class="">
						赛鸽服务
					</view>
				</view>

				<view class="serveBox">
					<view class="serveitem" v-for="(item,index) in serveList" :key="index"
						@click="handleServeDetail(item.id)">
						<image :src="item.image" style="width: 144rpx;height: 144rpx;border-radius: 10rpx;" mode="">
						</image>
						<view class="servemessage">
							<view class="name">
								{{item.sname}}
							</view>
							<view class="desc">
								{{item.introduction}}
							</view>
						</view>
						<view class="price">
							￥{{item.price}}
						</view>
					</view>
				</view>

			</view>

			<!-- 会员权益 -->

			<view class="menberBox">
				<image :src="imaurl+'b3.png'" style="width: 690rpx;height: 160rpx;border-radius: 20rpx;" mode="">
				</image>
				<view class="titles">
					会员尊享权益
				</view>

				<view class="menberList" @click="handleMenber">
					<view class="menberItem" v-for="(item,index) in vipServe" :key="index">
						<image :src="item.image" style="width: 72rpx;height: 72rpx;border-radius: 72rpx;" mode="">
						</image>
						<view class="text">
							{{item.name}}
						</view>
					</view>
					<!-- <view class="menberItem">
						<image src="@/static/image/b5.png" style="width: 72rpx;height: 72rpx;border-radius: 72rpx;"
							mode=""></image>
						<view class="text">
							免费菌群检测
						</view>
					</view> -->
					<!-- 	<view class="menberItem">
						<image src="@/static/image/b6.png" style="width: 72rpx;height: 72rpx;border-radius: 72rpx;"
							mode=""></image>
						<view class="text">
							DNA检测3次
						</view>
					</view> -->
					<!-- <view class="menberItem">
						<image src="@/static/image/b5.png" style="width: 72rpx;height: 72rpx;border-radius: 72rpx;"
							mode=""></image>
						<view class="text">
							飞行力检测3次
						</view>
					</view> -->
				</view>

				<view class="bottomtext" @click="handleMenber">
					<view class="">
						进入会员中心
					</view>
					<image :src="imaurl+'b7.png'" style="width: 32rpx;height: 32rpx;" mode=""></image>
				</view>
				
				<view class="videoPage">
					<image :src="imageUrl" style="width: 100%;height: 100%;" mode="" @click="handlegg"></image>
				</view>

			<!-- 	<image :src="imageUrl" style="width: 690rpx;height:156rpx ;margin: 30rpx auto;"
					mode="" @click="handlegg"></image> -->

			</view>
		</view>

		<!-- 羽色 -->
		<u-picker :show="yuseshow" :columns="yusesList" @cancel="yuseshow = false" @confirm="confirmyuse"
			@change="changeyuse"></u-picker>

		<!-- 省份 -->
		<u-picker :show="provinceshow" :columns="provinceList" @cancel="provinceshow = false" @confirm="confirmprovince"
			@change="changeprovince"></u-picker>

		<tabBar :value4="value4" @change4="change4" :list="tabList"></tabBar>
	</view>
</template>

<script>
	import tabBar from "@/components/tabbar.vue"
	import {
		tabList,
	} from "@/static/dataList.js"
	import {
		pmservice,
		vipcontent,
		yuses,
		getConfig
	} from "@/api/api.js"
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				value4: 0,
				tabList,
				ring: "", //环号
				color: "", //羽色
				other: "", //其他
				serveList: [],
				vipServe: [],
				imaurl: "https://szgb.tongchengbang.cc/img/image/",
				yuseshow: false,
				yusesList: [
					[]
				],
				province: "", //省份
				provinceshow: false,
				provinceList: [
					['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16',
						'17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32'
					]
				],
				year: "", //年份
				number: "", //代号
				imageUrl:"",
			}
		},
		onShow() {
			this.ring = ""
			this.color = ""
			this.number = ""
			this.province = ""
			this.other = ""
		},
		onLoad() {
			if (!uni.getStorageSync('idFlag')) {
				uni.reLaunch({
					url: "/pages/transfer/receive/index"
				})
			}
			if (!uni.getStorageSync('token')) {
				uni.reLaunch({
					url: "/pages/login/index"
				})
			}
			this.handlegetConfig()
			this.handleyuses()
			this.handlepmservice()
			this.handlevipcontent()

			const currentDate = new Date();
			this.year = currentDate.getFullYear();
		},

		methods: {
			async handlegetConfig() {
				let res = await getConfig({
					name: "bannerimg"
				})
				this.imageUrl = res.data
			},
			change4(name) {
				this.value4 = name
				uni.reLaunch({
					url: this.tabList[name].path
				});
			},
			async handleyuses() {
				let res = await yuses()
				// this.yusesList[0] = res.data
				res.data.forEach((item, index) => {
					this.yusesList[0].push(item.name)
				})
			},
			async handlepmservice() {
				let res = await pmservice()
				this.serveList = res.data
			},
			async handlevipcontent() {
				let res = await vipcontent()
				this.vipServe = res.data.vip_privilege
			},
			confirmyuse(e) {
				// console.log("yuse", e)
				this.color = e.value[0]
				this.yuseshow = false
			},
			changeyuse(e) {
				this.color = e.value[0]
			},
			confirmprovince(e) {
				this.province = e.value[0]
				this.provinceshow = false
			},
			changeprovince(e) {
				this.province = e.value[0]
			},
			handleSubmit() {
				if (this.province == "") {
					uni.showToast({
						title: '请先选择省份！',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (this.province == "") {
					uni.showToast({
						title: '请先选择省份！',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (this.number == "") {
					uni.showToast({
						title: '请先输入信鸽代号！',
						icon: "none",
						duration: 1500
					});
					return
				}
				let data = {
					ring: this.year + '-' + this.province + '-' + this.number,
					color: this.color,
					other: this.other
				}
				// console.log("22", data)
				uni.navigateTo({
					url: `./configMessage?data=${JSON.stringify(data)}`
				})
			},
			handleServeDetail(id) {
				uni.navigateTo({
					url: `./serveDetail?id=${id}`
				})
			},
			handleMenber() {
				uni.navigateTo({
					url: "/pages/client/mine/menberCenter"
				})
			},
			handlegg(){
				uni.navigateTo({
					url:"./advertisement"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.videoPage {
		width: 100%;
		// background-color: #ffffff;
		height: 3000rpx;
		margin-top: 30rpx;
	}
	.colors {
		color: #888888;
	}

	.contentBox {
		transform: translateY(-262rpx);

		.title {
			display: flex;
			font-family: PingFang SC,
				PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
			padding: 36rpx 30rpx;
			box-sizing: border-box;
			align-items: center;

			.shu {
				width: 8rpx;
				height: 32rpx;
				background: #00BF52;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				margin-right: 20rpx;
			}


		}

		.enterMessage {
			width: 750rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			padding-bottom: 30rpx;
			box-sizing: border-box;

			.itemBox {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 30rpx;
				padding-top: 0;
				box-sizing: border-box;
				justify-content: space-between;

				.message {
					// width: 330rpx;
					display: flex;
					align-items: center;


					.lable {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 33rpx;
					}

					.inputitem {
						width: 290rpx;
						height: 80rpx;
						background: #F6F6F6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						padding-left: 20rpx;
						box-sizing: border-box;
						margin-left: 20rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 33rpx;
					}

					.textareaitem {
						width: 614rpx;
						height: 200rpx;
						background: #F6F6F6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-left: 20rpx;
						padding: 20rpx;
						box-sizing: border-box;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						line-height: 33rpx;
					}
				}
			}

			.btns {
				width: 630rpx;
				height: 88rpx;
				background: #00BF52;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 88rpx;
				text-align: center;
				margin: 0rpx auto;
				margin-top: 30rpx;
			}
		}

		.serveList {
			width: 750rpx;
			// height: 748rpx;
			background: #FFFFFF;
			padding: 36rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.serveBox {
				margin-top: 30rpx;

				.serveitem {
					flex: 1;
					display: flex;
					align-content: center;
					align-items: center;
					width: 690rpx;
					// height: 184rpx;
					background: #F6F6F6;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					.servemessage {
						width: 380rpx;
						margin-left: 20rpx;
						min-height: 144rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.name {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 32rpx;
							color: #333333;
							line-height: 38rpx;
						}

						.desc {
							width: 300rpx;
							// height: 80rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #999999;
							line-height: 33rpx;
						}
					}

					.price {
						font-family: DIN, DIN;
						font-weight: 500;
						font-size: 36rpx;
						color: #E40700;
						line-height: 42rpx;
						// margin-left: 30rpx;
					}
				}
			}
		}


		.menberBox {
			width: 750rpx;
			background: #FFFFFF;
			padding: 36rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.titles {
				width: 100%;
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 700;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
				margin-top: 30rpx;
			}

			.menberList {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				margin-top: 30rpx;

				.menberItem {
					text-align: center;

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 28rpx;
					}
				}

			}

			.bottomtext {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #00BF52;
				line-height: 33rpx;
				display: flex;
				align-items: center;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
			}

		}


	}
</style>